<template>
  <div class="echartsBox" ref="echartsBox"></div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      /* 重新渲染图表 */
      this.drawLine();
    });
  },
  props: {
    //父组件传入的数据
    data: {
      type: Array | Object,
      default: () => [],
    },
  },
  watch: {
    data: "drawLine", // 数值变化是更新图表
  },
  methods: {
    //渲染echarts
    drawLine() {
      try {
        let that = this;
        let myChart = this.$echarts.init(this.$refs.echartsBox);
        var data = [
          { name: "9519", value: "21" },
          { name: "5858", value: "21" },
          { name: "4234", value: "21" },
          { name: "1076", value: "21" },
          { name: "318", value: "21" },
        ];
        function contains(arr, dst) {
          var i = arr.length;
          while ((i -= 1)) {
            if (arr[i] == dst) {
              return i;
            }
          }
          return false;
        }

        var attackSourcesColor = [
          new this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [
            { offset: 0, color: "rgba(13,73,140,1)" },
            { offset: 1, color: "rgba(252,69,24,1)" },
          ]),
          new this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [
            { offset: 0, color: "rgba(13,73,140,1)" },
            { offset: 1, color: "rgba(255,147,46,1)" },
          ]),
          new this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [
            { offset: 0, color: "rgba(13,73,140,1)" },
            { offset: 1, color: "rgba(241,198,72,1)" },
          ]),
          new this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [
            { offset: 0, color: "rgba(13,73,140,1)" },
            { offset: 1, color: "rgba(20,142,209,1)" },
          ]),
        ];
        var attackSourcesColor1 = [
          "#EB3B5A",
          "#FA8231",
          "#F7B731",
          "#3860FC",
          "#1089E7",
          "#F57474",
          "#56D0E3",
          "#1089E7",
          "#F57474",
          "#1089E7",
          "#F57474",
          "#F57474",
        ];
        var attaData = [];
        var attaName = [];
        var attaValue = [];
        data.forEach((it, index) => {
          attaData[index] = parseFloat(it.name).toFixed(2);
          attaName[index] = `${it.name}Kw·h`;
          attaValue[index] = `${it.value}日`;
        });
        var salvProMax = []; //背景按最大值
        for (let i = 0; i < attaData.length; i++) {
          salvProMax.push(attaData[0]);
        }
        function attackSourcesDataFmt(sData) {
          var sss = [];
          sData.forEach(function (item, i) {
            let itemStyle = {
              color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],
            };
            sss.push({
              value: item,
              itemStyle: itemStyle,
            });
          });
          return sss;
        }

        var option = {
          tooltip: {
            show: false,
            backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色（此时为默认色）
            textStyle: {
              fontSize: 16,
            },
          },
          color: ["#F7B731"],
          legend: {
            pageIconSize: [12, 12],
            itemWidth: 20,
            itemHeight: 10,
            textStyle: {
              //图例文字的样式
              fontSize: 10,
              color: "rgba(212,240,255,1)",
            },
            selectedMode: false,
            data: ["个人所得(亿元)"],
            show: false,
          },
          grid: {
            left: "5%",
            right: "2%",
            width: "80%",
            bottom: "2%",
            top: "8%",
            containLabel: true,
          },
          xAxis: {
            type: "value",

            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
          yAxis: [
            {
              type: "category",
              inverse: true,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisPointer: {
                label: {
                  show: true,
                  //margin: 30
                },
              },
              pdaaing: [5, 0, 0, 0],
              postion: "right",
              data: attaName,
              axisLabel: {
                margin: 30,
                fontSize: 10,
                align: "left",
                padding: [-2, 0, 0, 0],
                color: "#000",
                rich: {
                  nt1: {
                    color: "rgba(255,70,24,1)",
                    // backgroundColor: attackSourcesColor1[0],
                    backgroundColor: {
                      image: require("../../../assets/images/echarts/paiming1.png"),
                    },
                    width: 13,
                    height: 20,
                    fontSize: 10,
                    align: "center",
                    borderRadius: 100,
                    lineHeight: "10",
                    padding: [0, 1, 0, 1],
                    // padding:[0,0,2,0],
                  },
                  nt2: {
                    color: "rgba(255,147,46,1)",
                    backgroundColor: {
                      image: require("../../../assets/images/echarts/paiming2.png"),
                    },
                    width: 13,
                    height: 18,
                    fontSize: 10,
                    align: "center",
                    borderRadius: 100,
                    padding: [0, 1, 2, 1],
                  },
                  nt3: {
                    color: "rgba(241,198,72,1)",
                    backgroundColor: {
                      image: require("../../../assets/images/echarts/paiming3.png"),
                    },
                    width: 13,
                    height: 18,
                    fontSize: 10,
                    align: "center",
                    borderRadius: 100,
                    padding: [0, 1, 2, 1],
                  },
                  nt: {
                    color: "rgba(212,240,255,1)",
                    backgroundColor: attackSourcesColor1[3],
                    width: 13,
                    height: 13,
                    fontSize: 10,
                    align: "center",
                    lineHeight: 3,
                    borderRadius: 100,
                    padding: [0, 1, 2, 1],
                    lineHeight: 5,
                  },
                },
                formatter: function (value, index) {
                  index = contains(attaName, value) + 1;
                  if (index - 1 < 3) {
                    return ["{nt" + index + "|" + index + "}"].join("\n");
                  } else {
                    return ["{nt|" + index + "}"].join("\n");
                  }
                },
              },
            },
            {
              type: "category",
              inverse: true,
              axisTick: "none",
              axisLine: "none",
              show: true,
              axisLabel: {
                textStyle: {
                  color: "#d4f0ff",
                  fontSize: "12",
                },
              },
              data: attackSourcesDataFmt(attaName),
            },
            {
              //名称
              type: "category",
              offset: -10,
              position: "left",
              axisLabel: {
                color: `rgba(212,240,255,1)`,
                fontSize: 10,
              },
              axisLine: {
                show: false,
              },
              inverse: false,
              axisTick: {
                show: false,
              },
              axisLabel: {
                interval: 0,
                color: "rgba(212,240,255,1)",
                align: "left",
                verticalAlign: "bottom",
                lineHeight: 13,
                fontSize: 11,
              },
              data: attaValue,
              data: attackSourcesDataFmt(attaValue),
            },
          ],
          series: [
            {
              zlevel: 1,
              name: "个人所得(亿元)",
              type: "bar",
              barWidth: "4px",
              animationDuration: 1500,
              data: attackSourcesDataFmt(attaData),
              align: "center",
              itemStyle: {
                normal: {
                  barBorderRadius: 10,
                },
              },
              label: {
                show: false,
                fontSize: 10,
                color: "rgba(212,240,255,1)",
                textBorderWidth: 2,
                padding: [2, 0, 0, 0],
              },
            },
            // {
            //   name: "个人所得(亿元)",
            //   type: "bar",
            //   barWidth: 4,
            //   barGap: "-100%",
            //   margin: "20",
            //   data: salvProMax,
            //   textStyle: {
            //     //图例文字的样式
            //     fontSize: 10,
            //     color: "rgba(212,240,255,1)",
            //   },
            //   itemStyle: {
            //     normal: {
            //       color: "#05325F",
            //       //width:"100%",
            //       fontSize: 10,
            //       barBorderRadius: 30,
            //     },
            //   },
            // },
            // {
            //   type: "bar",
            //   // barGap: "-100%",
            //   barWidth: 6,
            //   z: 0,
            //   label: {
            //     normal: {
            //       show: true,
            //       position: "right",
            //       formatter: function (params) {
            //         var idy = params.dataIndex > 3 ? 3 : params.dataIndex;
            //         return (
            //           "{color" +
            //           idy +
            //           "|" +
            //           TData[params.dataIndex] +
            //           "}{u" +
            //           idy +
            //           "|" +
            //           "%}"
            //         );
            //       },
            //       rich: {
            //         color0: {
            //           color: "#ff562e",
            //           fontSize: 24,
            //           verticalAlign: "bottom",
            //         },
            //         color1: {
            //           color: "#ff900e",
            //           fontSize: 24,
            //           verticalAlign: "bottom",
            //         },
            //         color2: {
            //           color: "#0599de",
            //           fontSize: 24,
            //           verticalAlign: "bottom",
            //         },
            //         color3: {
            //           color: "#0bbe63",
            //           fontSize: 24,
            //           verticalAlign: "bottom",
            //         },
            //         u0: {
            //           fontSize: 14,
            //           color: "#ff562e",
            //           padding: 2,
            //           verticalAlign: "bottom",
            //         },
            //         u1: {
            //           color: "#ff900e",
            //           fontSize: 14,
            //           padding: 2,
            //           verticalAlign: "bottom",
            //         },
            //         u2: {
            //           color: "#0599de",
            //           fontSize: 14,
            //           padding: 2,
            //           verticalAlign: "bottom",
            //         },
            //         u3: {
            //           color: "#0bbe63",
            //           fontSize: 14,
            //           padding: 2,
            //           verticalAlign: "bottom",
            //         },
            //       },
            //     },
            //   },
            //   tooltip: {
            //     show: false
            //   },
            //   itemStyle: {
            //     normal: {
            //       barBorderRadius: 5,
            //       color: "#e1e7eb"
            //     }
            //   },
            //   data:  attaValue
            // },
          ],
        };
        myChart.setOption(option);
        myChart.off("click");
        /* 点击事件 */
        myChart.on("click", (params) => {});
        /* 大小自适应 */
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      } catch (err) {
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.echartsBox {
  width: 100%;
  height: 100%;
}
</style>>
